<template>
  <div class="toast" v-show="isShow">
    {{message}}
  </div>
</template>

<script>
export default {
  name:'toast',
  data(){
    return {
      message:'',
      isShow:false
    }
  },
  methods:{
    show(message,druation){
      this.isShow = true 
      this.message = message
      setTimeout(()=>{
        this.isShow = false
        this.message = ''
      },druation)
    }
  }
}
</script>

<style scoped>
.toast{
  position: fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  padding: 5px 10px;
  background-color: #00000079;
  border-radius: 10px;
  z-index: 999;
  color:#fff;
}
</style>